<template>
  <FlexCard :title="title" :loading="loading">
    <a-textarea
      v-model:value="remark"
      :rows="4"
      :style="{ height: remarkHeight }"
      placeholder="请输入说明"
      @change="handleRemarkChange"
    />
  </FlexCard>
</template>

<script>
import { defineComponent } from 'vue';
import { Input } from 'ant-design-vue';
import FlexCard from './FlexCard.vue';
import { defHttp } from '/@/utils/http/axios';

export default defineComponent({
  name: 'ReportRemarkCard',
  components: {
    FlexCard,
    ATextarea: Input.TextArea,
  },
  props: {
    title: {
      type: String,
      default: '说明',
    },
    loading: {
      type: Boolean,
      default: false,
    },
    reportCode: {
      type: String,
      required: true,
    },
    reportName: {
      type: String,
      required: true,
    },
    remarkHeight: {
      type: String,
      default: '100px',
    },
  },
  data() {
    return {
      remark: '',
    };
  },
  watch: {
    reportCode: {
      handler(val) {
        if (val) {
          this.fetchData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    fetchData() {
      defHttp.post({
        url: '/data/report/remark/get',
        data: {
          reportCode: this.reportCode,
          reportName: this.reportName,
        },
      }).then((res) => {
        if (res.success) {
          this.remark = res.result || '';
        }
      });
    },
    handleRemarkChange() {
      defHttp.post({
        url: '/data/report/remark/save',
        data: {
          reportCode: this.reportCode,
          reportName: this.reportName,
          remark: this.remark,
        },
      });
    },
  },
});
</script>
